import React from 'react';
import { HashRouter, Switch, Route, Link } from 'react-router-dom';
import {Router} from 'react-config';
import {
    Qualification,
    Buttons
} from "react-ui"
import './index.less'

const titleStyle = {width:84}
const getData = {
    key:123,

}
const allData =[
    {
        title:'发票规格',
        isShowTitle:true,
        boxTitle:'发票信息',
        key:'key'
    },
    {
        title:'电子邮箱',
        key:'yyy'
    },
    {
        title:'发票内容',
        key:'key',
        render:()=>{
            var contentData = [
                {id:1,title:"工位服务费",moneys:"￥3.000.0"},
                {id:2,title:"服务费",moneys:"￥3.000.0"},
                {id:3,title:"租金",moneys:"￥3.000.0"}
            ];
            let content = contentData.map((items,index) => {
                    return <p key={index}><span className = " cans-color pages" >{items.title}<i>{items.moneys}</i></span></p>
            })
            return <div >{content}</div>;
        }
    },
    {
        title:'需退还金额',
        key:'key'
    },
    {
        title:'实际退换额',
        key:'key'
    },
    {
        title:'账单编号',
        isShowLine:true,
        key:'key'
    },
    {
        title:'抬头类型',
        render:()=>{
            return <div><input type="radio" /><input type="radio" /></div>
        },
        key:'key'
    },
]

export default class QualificationDemo extends React.Component{

        invoiceMessage(){
         
            let allField = allData.map((item,index)=>{
                let fieldValue = <span className = "cans "> {getData[item.key]}</span>;
                if(item.render){
                    fieldValue = item.render(item);
                }
                return (
                    <div key={index}>
                        {item.isShowTitle  &&   <div className = "information pages">{item.boxTitle}</div> }
                        <div className = "specifications pages">
                            <span style = {titleStyle}>{item.title}</span>{fieldValue}
                        </div>
                        {item.isShowLine && <div className = "invoice"></div>}
                    </div>
                        
                    )
            })
            return allField
        }
        
	    render() {
           
            return (
            <div className="qualification-demo">
                <Qualification title="退换详情信息">
                    {/* <div className = "invoice"> */}
                        {/* <div className = "information pages">发票信息</div> */}
                      
                        {this.invoiceMessage()}

                    {/* </div> */}
                    {/* <div className = "invoice">
                        <div className = "information pages">退换原因</div>
                        <div className = "specifications pages">
                            <span style = {titleStyle}>账号编码</span><span className = "cans topsT"> ZD00100100100100</span>
                        </div>
                    </div>
                    <div className = "invoice">
                        <div className = "information pages">开票资质</div>
                        <div className = "specifications pages">
                            <span style = {titleStyle}>发票抬头</span><span className = "cans"> 一路顺风（北京）信息技术有限公司</span>
                        </div>
                        <div className = "specifications pages">
                            <span>纳税人识别码</span><span className = "cans"> 000100010001000100</span>
                        </div>
                        <div className = "specifications pages">
                            <span style = {titleStyle}>注册地址</span><span className = "cans"> 北京市海淀区海淀大街39号3层</span>
                        </div>
                        <div className = "specifications pages">
                            <span style = {titleStyle}>注册电话</span><span className = "cans"> 010-1234567</span>
                        </div>
                        <div className = "specifications pages">
                            <span style = {titleStyle}>开户银行</span><span className = "cans">招商银行北京东三环支行</span>
                        </div>
                        <div className = "specifications pages">
                            <span style = {titleStyle}>银行账户</span><span className = "cans topsT">1109 1403 3610 101</span>
                        </div>
                    </div>
                    <div className = "invoice invoice-bottom">
                        <div className = "information pages">社区信息</div>
                        <div className = "specifications pages">
                            <span style = {titleStyle}>社区名称</span><span className = "cans">创业大街社区</span>
                        </div>
                        <div className = "specifications pages">
                            <span style = {titleStyle}>公司名称</span><span className = "cans topsT">氪空间（北京）信息技术有限公司</span>
                        </div>
                    <div> <button type="button" className = "Returned">返回</button></div>
                    </div> */}
                </Qualification>
            </div>
	        );
	    }
}